<div class="content-wrapper">
    <script type="text/ng-template" id="FotoPopUp.html">
        <div class="modal-body foto-popup">
            <img ng-src="@{{params}}" class="img-responsive" alt="Responsive image"  width="100%">
        </div>
    </script>
    <script type="text/ng-template" id="DeletePopUp.html">
        <div ng-hide="disabled" class="modal-body delete-popup">
            <img ng-src="warning-sign.jpg" class="img-responsive" alt="Responsive image">
            <div id="delete-notification"><h4>Are you sure that you want to permanently delete this data?</h4></div>
            <div class="modal-footer">
                <button class="btn btn-primary" ng-click="ok()">OK</button>
                <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
            </div>            
        </div>
        <div ng-show="disabled" class="modal-body delete-popup form-loader-blue form-loader-big form-loader-padding">
              <span class="glyphicon glyphicon-refresh gly-spin"></span>    
        </div>
    </script>
    <div class="content-title">
        <div class="content-title-left"></div>
        <div class="content-title-middle">
            <h2>Tabel Gangguan</h2>
        </div>
        <div class="content-title-right">
            <div class="pagination-container" ng-hide="nodata || loading">
                <pagination 
                    total-items     = "datagangguan.length" 
                    ng-model        = "bigCurrentPage" 
                    items-per-page  = "totalstreams" 
                    max-size        = "maxSize" 
                    class           = "pagination-sm" 
                    boundary-links  = "true" 
                    rotate          = "false"
                    num-pages       = "numPages"
                    previous-text   = "&lsaquo;"
                    next-text       = "&rsaquo;"
                    first-text      = "&laquo;"
                    last-text       = "&raquo;"
                >
                </pagination>
            </div>
            
            {{ Form::open(array('url' => 'export/apk1', 'method' => 'print-container', 'class' => 'print-container', 'ng-hide' => 'nodata || loading')) }}
                <input type="hidden" name="array" ng-value="tryingtoexport(datagangguan)">
                <input type="image" src="microsoft-excel-logo.png" width="30px" height="30px">
    
            {{ Form::close() }}
        </div>
    </div>
    <div class="content-page">
        <div ng-hide="nodata || loading" class="innerpartysystem">
            <div class="table-header-apk1">
                <table id="headertable" class="table table-striped table-bordered">
                    <thead>    
                        <tr>
                            <th><div id="table-no-apk1">No</div></th>
                            <th><div id="table-tanggal">Tanggal</div></th>
                            <th><div id="table-feeder-apk1">Area</div></th>
                            <th><div id="table-feeder-apk1">Rayon</div></th>
                            <th><div id="table-feeder-apk1">Feeder</div></th>
                            <th><div id="table-latitude">Latitude</div></th>
                            <th><div id="table-longitude">Longitude</div></th>
                            <th><div id="table-namatiang">Nama Tiang</div></th>
                            <th><div id="table-komponen">Komponen</div></th>
                            <th><div id="table-tindakan">Tindakan</div></th>
                            <th><div id="table-keterangan">Keterangan</div></th>
                            <th><div id="table-foto">Foto</div></th>
                            <th><div id="table-action" headmover>Delete</div></th>
                        </tr>
                    </thead>
                </table>
            </div>
            
            <div class="table-body-apk1">
                <table id="bodytable" class="table table-striped table-bordered" bodywatcher>
                    <tbody>
                        <tr ng-repeat="value in streams" my-repeat-directive>
                            <td><div id="table-no-apk1">@{{ ((bigCurrentPage - 1) * totalstreams) + $index + 1 }}</div></td>
                            <td><div id="table-tanggal">@{{ makeTanggal(value.tanggal) }}</div></td>
                            <th><div id="table-feeder-apk1">@{{ value.area }}</div></th>
                            <th><div id="table-feeder-apk1">@{{ value.rayon }}</div></th>
                            <th><div id="table-feeder-apk1">@{{ value.feeder }}</div></th>
                            <td><div id="table-latitude">@{{ value.latitude }}</div></td>
                            <td><div id="table-longitude">@{{ value.longitude }}</div></td>
                            <td><div id="table-namatiang">@{{ value.nama_tiang }}</div></td>
                            <td><div id="table-komponen">@{{ value.komponen }}</div></td>
                            <td><div id="table-tindakan">@{{ value.tindakan }}</div></td>
                            <td><div id="table-keterangan">@{{ value.keterangan }}</div></td>
                            <td><div id="table-foto" ng-click="clickfoto(value.foto)"><img ng-src="files/photos/@{{value.foto}}" class="img-responsive" alt="Responsive image"></div></td>
                            <td><div id="table-action" ng-click="clickdelete(value.id)"><img src="DeleteRed.png" width="50" height="50"></div></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="table-nodata-container" ng-show="nodata && !loading">
            <table id="nodatatable">
                <tr>
                    <td>
                        <span class="plnrbbdist-glyphicon glyphicon glyphicon-tasks" aria-hidden="true"></span><br />
                        <h5>Empty Table.<br />No data available.</h5>
                    </td>
                </tr>
                <tr></tr>
            </table>
        </div>
        <div class="table-loading-container" ng-show="loading">
            <table id="nodatatable" class="sebenernyabuatloader">
                <tr>
                    <td>
                        <span class="glyphicon glyphicon-refresh gly-spin"></span>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>